import UserContext, {UserType} from "./store"
import {useState, useContext} from "react"

function ConsumerComponent() {
  const user = useContext<UserType>(UserContext)

  return (
    <div>
      <span>{user.first}{user.last}</span>
    </div>
  )
}

export default function UseContextComponent() {
  const [user, setUser] = useState<UserType>({
    first:'zhou',
    last: 'fan'
  })
  return (
    <UserContext.Provider value={user}>
      <ConsumerComponent/>
      <button
      onClick={() => setUser({
        first: '夏天',
        last: '周一帆'
      })}
      >改变用户</button>
    </UserContext.Provider>
  )
}
